
<template>
  <div class="cardSend-wrapper">
    <el-tabs @tab-click="handleClick"  v-model="activeName">
      <el-tab-pane label="发卡" class="cardSend" name="first">
        <div class="cardSend-content">
          <div class="content-header">
            <p>请选择卡类型:</p>
          </div>
          <div class="content-cards">
            <div
              class="cards measure"
              @click="meterCard"
              v-if="hasPermission('truck:cardOperate:hairCard')"
            >
              <p><img src="~@/assets/img/yinhangka.png" alt=""></p>
              <p>IC卡</p>

            </div
            >
            <div
              @click="payeeCard"
              class="cards settle"
              v-if="hasPermission('truck:cardOperate:hairCard')"
            >
              <p><img src="~@/assets/img/scanning.png" alt=""></p>
              <p>RFID卡</p>
            </div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="发卡记录" name="second" class="card-record">
        <div>
          <section>
            <el-form
              ref="form"
              :model="queryForm"
              label-width="61px"
              :inline="true"
              class="queryForm adjustCondition"
            >
                <el-row>
              <el-form-item label="关键字:">
                <div>
                  <el-input
                    v-model="queryForm.keyword"
                    size="small"
                    placeholder="请输入卡序号/车牌号/结算人/司机身份证查询"
                  ></el-input>
                </div>
              </el-form-item>
              <el-form-item label="发卡日期:" label-width="75px">
                <div >
                  <el-date-picker
                    value-format="yyyy-MM-dd"
                    v-model="queryForm.createDate"
                    type="daterange"
                    range-separator="~"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                  </el-date-picker>
                </div>
              </el-form-item>
              <el-form-item label="卡类型:">
                <div style="width: 200px">
                  <el-select clearable v-model="queryForm.cardType" placeholder="请选择">
                    <el-option
                      v-for="item in  $dictUtils.getDictList('cardType')"
                      :key="item.value"
                      :label="item.label"
                      :value="Number(item.value)">
                    </el-option>
                  </el-select>
                </div>
              </el-form-item>
                </el-row>
                <el-row>
              <el-form-item label="卡状态:">
                <div style="width: 200px">
                  <el-select clearable v-model="queryForm.cardState" placeholder="请选择">
                    <el-option
                      v-for="item in  $dictUtils.getDictList('cardState')"
                      :key="item.value"
                      :label="item.label"
                      :value="Number(item.value)">
                    </el-option>
                  </el-select>
                </div>
              </el-form-item>
              <el-form-item>
                <div class="but-container">
                  <el-button
                    type="primary"
                    size="small"
                    class="search-btn"
                    @click="getList"
                  >查询</el-button>
                  <el-button size="small" @click="reset">重置</el-button>
                </div>
              </el-form-item>
                </el-row>
            </el-form>
          </section>
            <section class="right-but adjustRight-but" style="display:flex;margin-bottom:10px">
                <el-button type="text" size="small" style="margin-right: 5px" @click="exportExcel" v-if="hasPermission('truck:cardRegister:export')"
                >
                    <img src="~@/assets/img/export.png" alt="">
                </el-button>
                <el-button type="text"  style="margin-right:-13px;cursor:pointer;" @click="getList">
                    <img style="width:44px;height:36px;" src="~@/assets/img/refresh.png" >
                </el-button>
                <PopoverBut :checkedProps="checkedProps"  :options="options" @getCheckeds="handlerCloumn"></PopoverBut>
            </section>
          <section>
            <el-button size="small" style="margin-right: 5px" @click="exportExcel"  v-if="hasPermission('truck:cardRegister:export')"
            >导出</el-button>
          </section>
          <el-table
            size="mini"
            v-loading="loading"
            :data="tableData"
            style="width: 100%; margin-top: 10px"
            border
            class="record-table"
            :header-cell-style="{
        'background-color': '#eeeeee !important',
      }"
            :row-class-name="tableRowClassName"
            @sort-change="sortthiscolumn"
            @current-change="handleTableCurrentChange"
          >
            <el-table-column type="index" label="序号" width="70" align="center">
              <template slot-scope="scope">
          <span>{{
            (page.pageNo - 1) * page.pageSize + scope.$index + 1
          }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="register.cardType" label="卡类型" min-width="100">
              <template slot-scope="scope">
                <span v-if="scope.row.register!=undefined">{{$dictUtils.getDictLabel("cardType", scope.row.register.cardType, "")}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="cardNumber" label="卡序号" min-width="120"> </el-table-column>
            <el-table-column prop="cardInnerNumber" label="卡内号" min-width="120"> </el-table-column>
            <el-table-column prop="cardUsage" label="卡用途" min-width="110">
              <template slot-scope="scope">
                {{$dictUtils.getDictLabel("cardUsage", scope.row.cardUsage, "")}}
              </template>
            </el-table-column>
            <el-table-column prop="truckNumber" label="车辆" min-width="120">
                <template slot-scope="scope">
                    {{scope.row.truckNumber | noValue}}
                </template>
            </el-table-column>
            <el-table-column prop="" label="持卡人" min-width="220">
              <template slot-scope="scope">
                <div v-if="scope.row.cardUsage === 1">
                    <p>{{scope.row.payeeName}}</p>
                    <p>{{scope.row.payeeIdCard}}</p>
                </div>
                <div v-if="scope.row.cardUsage === 2 && scope.row.driver != undefined">
                    <p>{{scope.row.driver.name}}</p>
                    <p>{{scope.row.driver.idcard}}</p>
                </div>
                <div v-if="scope.row.cardUsage === 3 && scope.row.user != undefined">
                    <p>{{scope.row.user.name}}</p>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="payMoney" label="金额" min-width="100" align="right">
                <template slot-scope="scope">
                    {{scope.row.payMoney | noValue}}
                </template>
            </el-table-column>
            <el-table-column prop="state" label="状态" min-width="100">
              <template slot-scope="scope">
                <div class="state" :class="{empty: scope.row.state===1,normal: scope.row.state===2, process:scope.row.state===3,invalid:scope.row.state===4}"><span></span>{{$dictUtils.getDictLabel("cardOperateState", scope.row.state, "")}}</div>
              </template>
            </el-table-column>
            <el-table-column prop="createDate" label="发卡时间" width="140"></el-table-column>
              <span v-for="(item,index) in checkedProps" :key="index">
                    <el-table-column prop="cardCode" :label="item" v-if="item==='发卡编号'" sortable="card" min-width="160"> </el-table-column>
                    <el-table-column prop="createBy.loginName" :label="item" v-if="item==='发卡人'" min-width="100"></el-table-column>
                    <el-table-column prop="createBy.loginName" min-width="110px" :label="item" v-if="item==='创建人'">
              <template slot-scope="scope">
                  <span v-if="scope.row.createBy">
                      <span v-if="scope.row.createBy.loginName">
                          {{scope.row.createBy.loginName | noValue}}
                      </span>
                      <span v-else>--</span>
                  </span>
                  <span v-else>--</span>
              </template>
          </el-table-column>
          <el-table-column prop="createDate" :label="item"  width="140px" v-if="item==='创建时间'">
            <template slot-scope="scope">
                {{scope.row.createDate | noValue}}
            </template>
        </el-table-column>
          <el-table-column prop="updateBy.loginName" min-width="120px" :label="item" v-if="item==='上次操作人'">
              <template slot-scope="scope">
                  <span v-if="scope.row.updateBy">
                      <span v-if="scope.row.updateBy.loginName">
                          {{scope.row.updateBy.loginName | noValue}}
                      </span>
                      <span v-else>--</span>
                  </span>
                  <span v-else>--</span>
              </template>
          </el-table-column>
          <el-table-column prop="updateDate" :label="item"  width="140px" v-if="item==='上次操作时间'">
              <template slot-scope="scope">
                  {{scope.row.updateDate | noValue}}
              </template>
          </el-table-column>
      </span>
            <el-table-column prop="cardRegisterId" label="操作" width="224">
              <template slot-scope="scope" >
                <el-link type="primary" :underline="false" @click="view(scope.row)"
                         v-if="hasPermission('truck:cardModified:list')"
                >操作记录</el-link>
                <el-link type="primary" :underline="false" @click="handleCommand({method:'edit', row:scope.row})" :disabled="scope.row.state !==2">修改</el-link>
                <el-dropdown @command="handleCommand">
                  <span class="el-dropdown-link">更多<i class="el-icon-arrow-down el-icon--right"></i></span>
                  <el-dropdown-menu slot="dropdown">
<!--                    <el-dropdown-item :command="{method:'edit', row:scope.row}" :disabled="scope.row.state !==2">修改</el-dropdown-item>-->
                    <el-dropdown-item :command="{method:'frozenCard', row:scope.row}" :disabled="scope.row.state !==2">挂失</el-dropdown-item>
                    <el-dropdown-item :command="{method:'unFrozenCard', row:scope.row}" :disabled="scope.row.state !==3">取消挂失</el-dropdown-item>
                    <el-dropdown-item :command="{method:'disCard', row:scope.row}" :disabled="scope.row.state ===4 || scope.row.state ===1">作废</el-dropdown-item>
                    <el-dropdown-item :command="{method:'clearCard', row:scope.row}" :disabled="scope.row.state === 1">退卡</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-size="page.pageSize"
            :current-page="page.pageNo"
            layout="total,sizes,prev, pager, next, jumper"
            :total="page.total"
          >
          </el-pagination>

        </div>
      </el-tab-pane>
    </el-tabs>
    <EditForm ref="editForm"></EditForm>
    <RecordForm ref="recordForm"></RecordForm>
    <MeterCardForm ref="meterCardForm" @refreshDataList="getList"></MeterCardForm>
    <PayeeCardForm ref="payeeCardForm" @refreshDataList="getList"></PayeeCardForm>
  </div>

</template>
<script>
import { getList, frozenCard, unFrozenCard, disCard, clearCard } from '@/api/truck/cardOperate/cardOperate.js'
import EditForm from './editForm'
import RecordForm from './recordForm'
import MeterCardForm from './meterCardForm'
import PayeeCardForm from './payeeCardForm'
import PopoverBut from '@/components/button/popoverBut'
const options1 = []
export default {
  components: {
    MeterCardForm,
    EditForm,
    RecordForm,
    PayeeCardForm,
    PopoverBut
  },
  data () {
    return {
      checkedProps: options1,
      modifiedId: '',
      activeName: 'first',
      queryForm: {
        keyword: '',
        startTime: '',
        endTime: '',
        cardUsage: '',
        cardType: '',
        cardState: '',
        cardRegisterId: '',
        operateType: 1
      },
      cardOperate: {
        cardRegisterId: '',
        cardInnerNumber: '',
        cardNumber: '',
        operateType: '',
        cardUsage: '',
        truckId: '',
        driverId: '',
        driverIdcard: '',
        payeeId: '',
        payeeIdCard: '',
        payMoney: '',
        refundMoney: '',
        state: ''
      },
      page: {
        pageSize: 10,
        pageNo: 1,
        total: 0
      },
      tableData: [
      ],
      currentRow: null,
      orderBy: {
        name: 'create_date',
        method: 'desc'
      },
      loading: false,
        options: [
          {
            label: '发卡编号',
            key: 'cardCode'
          },
          {
            label: '发卡人',
            key: 'createBy.loginName'
          },
            // {
            //     label: '创建人',
            //     key: 'createBy.loginName'
            // },
            // {
            //     label: '创建时间',
            //     key: 'createDate'
            // },
            {
                label: '上次操作人',
                key: 'updateBy.loginName'
            },
            {
                label: '上次操作时间',
                key: 'updateDate'
            }]
    }
  },
  methods: {
    // 获取列表带分页
    getList () {
      this.loading = true
      getList({
        pageSize: this.page.pageSize,
        pageNo: this.page.pageNo,
        orderBy: this.orderBy.name,
        orderByAORC: this.orderBy.method,
        keyword: this.queryForm.keyword,
        startTime: this.queryForm.createDate == null ? null : this.queryForm.createDate[0],
        endTime: this.queryForm.createDate == null ? null : this.queryForm.createDate[1],
        cardUsage: this.queryForm.cardUsage,
        operateType: this.queryForm.operateType,
        cardType: this.queryForm.cardType,
        cardState: this.queryForm.cardState
      }).then(({data}) => {
        if (data.code === '200') {
          this.tableData = data.result.list
          this.page.total = data.result.count
          this.cardOperate = this.tableData
        }
        this.loading = false
      })
    },
    tableRowClassName ({ row, rowIndex }) {
      if (rowIndex % 2 === 1) {
        return 'warning-row'
      } else {
        return 'success-row'
      }
    },
    // 导出
    exportExcel () {
      this.$utils.download('/truck/cardOperate/export')
    },
      // 是否显示某列数据
      handlerCloumn (e) {
          this.checkedProps = e
      },
    // 发卡记录
    view (row) {
      this.$refs.recordForm.init('send', row)
    },
    meterCard () {
      this.$refs.meterCardForm.init('add')
    },
    payeeCard () {
      this.$refs.payeeCardForm.init('add')
    },
    edit (row) {
      if (row.register.cardType === 1) {
        this.$refs.meterCardForm.init('update', row.id)
      }
      if (row.register.cardType === 2) {
        this.$refs.payeeCardForm.init('update', row.id)
      }
    },
    handleCommand (command) {
      if (command.method === 'edit') {
        this.edit(command.row)
      } else if (command.method === 'frozenCard') {
        this.frozenCard(command.row)
      } else if (command.method === 'unFrozenCard') {
        this.unFrozenCard(command.row)
      } else if (command.method === 'disCard') {
        this.disCard(command.row)
      } else if (command.method === 'clearCard') {
        this.clearCard(command.row)
      }
    },
    // 挂失
    frozenCard (row) {
      frozenCard(row).then(({data}) => {
        if (data.code === '200') {
          this.$message({
            type: 'success',
            message: '挂失成功!'
          })
          this.getList()
        }
      })
    },
    // 取消冻结
    unFrozenCard (row) {
      unFrozenCard(row).then(({data}) => {
        if (data.code === '200') {
          this.$message({
            type: 'success',
            message: '取消挂失成功!'
          })
          this.getList()
        }
      })
    },
    // 作废
    disCard (row) {
      disCard(row).then(({data}) => {
        if (data.code === '200') {
          this.$message({
            type: 'success',
            message: '卡片作废成功!'
          })
          this.getList()
        }
      })
    },
    // 退卡
    clearCard (row) {
      clearCard(row).then(({data}) => {
        if (data.code === '200') {
          this.$message({
            type: 'success',
            message: data.message
          })
          this.getList()
        }
      })
    },
    // 排序
    sortthiscolumn (a) {
      this.orderBy.name = a.prop
      this.page.pageNo = 1
      if (a.order === 'ascending') {
        this.orderBy.method = 'asc'
      } else {
        this.orderBy.method = 'desc'
      }
      this.getList()
    },
    handleSizeChange (e) {
      this.page.pageSize = e
      this.getList()
    },
    handleCurrentChange (e) {
      this.page.pageNo = e
      this.getList()
    },
    handleTableCurrentChange (val) {
      this.currentRow = val
      this.cardOperate = this.currentRow
    },
    // 日期选择
    changeHandlerDate (e) {
      this.queryForm.startTime = e[0]
      this.queryForm.endTime = e[1]
    },
    handleClick (e) {
      if (e.index === '1') {
        this.getList()
      }
    },
    reset () {
      this.queryForm.keyword = ''
      this.queryForm.startTime = ''
      this.queryForm.endTime = ''
      this.queryForm.cardType = ''
      this.queryForm.cardState = ''
    }
  },
  mounted () {
    this.getList()
  }
}
</script>
<style lang="scss" scoped>
    @import '@/assets/scss/config.scss';
.el-table .success-row {
  background: #f0f9eb;
}
::v-deep .el-table .warning-row {
  background: #f7f7f7;
}
  .cardSend-wrapper{
    margin:-20px;
    ::v-deep.el-tabs__header{
      margin-bottom: 0;
      .el-tabs__item{
        padding: 0 35px;
          height: 50px;
          line-height: 50px;
          font-size: 16px;
      }
      .el-tabs__item.is-active{
        background: $--color-primary-liyu;
        color: #FFFFFF;
      }
      .el-tabs__item.is-top:nth-child(2).is-active{
        border-radius: 4px 0px 0px 0px;
      }
      .el-tabs__item.is-top:nth-child(2){
        padding-left: 35px;
      }
      .el-tabs__item.is-top:last-child{
        padding-right: 35px;
      }
      .el-tabs__active-bar{
        display: none;
      }
      .el-tabs__nav-wrap::after{
        height: 1px;
        background-color: #EEEEEE;
      }
    }
    ::v-deep.el-tabs__content{
      .cardSend{
        padding: 50px;
        p{
          margin: 0;
          font-size: 20px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #333333;
        }
        .content-cards{
          display: flex;
          text-align: center;
          margin-top: 30px;
          .cards{
            width: 270px;
            height: 170px;
            border-radius: 10px;
            color: #FFFFFF;
            cursor: pointer;
            padding-top: 43px;
            margin-right: 70px;

            p{
              font-size: 24px;
              font-family: Microsoft YaHei;
              font-weight: 400;
              color: #FFFFFF;
              img{
                height: 39px;
                margin-bottom: 25px;
              }
            }
          }
          .cards.measure{
            background: #16C5DF;
          }
          .cards.settle{
            background: #F4A33A;
          }
          .cards.sampling{
            background: #1890FF;
          }
        }
      }
      .card-record{
        padding: 20px;
        .queryForm{
          .el-form-item{
            margin-right: 50px;
            margin-bottom: 20px;
              &:last-child{
                  margin-right: 0;
              }
          }
          .el-row:last-child{
            .el-form-item{
              margin-bottom: 0;
            }
          }

          .el-input--small{
            width: 320px;
          }
          .el-date-editor{
            width: 260px;
          }
            .search-btn{
                margin-left: 0;
            }
        }
        .record-table{
          p{
            margin: 0;
          }
        }
      }
    }
  }
</style>
